<template>
    <view class="">
        <view class="fixed">
            <!-- #ifdef MP-WEIXIN --> 
            <top-nav :inner-title="title" is-show-back="true" is-fixed="false" :navH="navH" :n="n" is-white="bg-white" opacity="1"></top-nav>
            <!-- #endif -->
            <view class="menu">
                <view @click="tabbarEvent(2)" :class="tabbarId == 2?'ck':''">
                    <text>红包{{redpacket_count}}</text>
                    <icon></icon>
                </view>
                <view @click="tabbarEvent(1)" :class="tabbarId == 1?'ck':''">
                    <text>店铺红包{{store_redpacket_count}}</text>
                    <icon></icon>
                </view> 
            </view>
        </view>
        <!-- #ifdef MP-WEIXIN --> 
        <view :style="{height:navH + 44 + 'px'}"></view>
        <!-- #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <view :style="{height:44 + 'px'}"></view>
        <!-- #endif -->
        
        <view class="scroll">
            <view class="packet" v-for="(item,index) in packetList" :key="index" :class="tabbarId == 1 ? 'black_name' : ''">
                <view class="packet_top">
                    <view class="radius left">
                        <view class=""></view>
                    </view>
                    <view class="packet_left">
                        <view class="packet_name">{{item.title}}</view>
                        <view class="packet_deadline">有效期至{{item.end_time}}</view>
                    </view>
                    <view class="packet_right">
                        <view class="packet_value">¥<text>{{item.reduction}}</text></view>
                        <view class="packet_require" v-if="item.full>0">满{{item.full}}可用</view>
                        <view class="packet_require" v-else>无门槛使用</view>
                    </view>
                    <view class="radius right">
                        <view class=""></view>
                    </view>
                </view>
                <view class="packet_bottom">
                    <view class="packet_tip"> 
                        <view class="tip">{{item.content}} </view>
                        <view class="red_icon" v-if="item.store_id && item.store_id > 0" @click="goStore(item.store_id)">去使用</view>
                    </view>
                   
                </view>
            </view>
            <view class="empty_red flex column" v-if="packetList.length == 0">
                <view class="empty_red_icon"></view>
                <view class="gray_text text">暂无可用红包</view>
            </view>
            <view class="no-more">
                <view>没有更多有效券了</view> 
                <view class="slide_text">|</view>
                <view @click="goUseless()">
                    <view>查看无效券</view>
                    <view class="arr_right"></view>
                </view> 
            </view>  
            <view class="no-more" v-if="tabbarId == 2" @click="goRedInfo()">通用红包使用说明</view>
            <view class="no-more" v-if="tabbarId == 1"  @click="goRedInfo()">店铺红包使用说明</view>
        </view>
    </view>
</template>

<script>
    import uniFly    from 'unifly';
	import request   from '../../common/request.js';
	import $api_base from '../../api/api_base.js';
	import topNav    from '@/template/topnav/index.vue';
	import event     from '../../common/event.js';
	export default {
		components: { topNav },
		data() {
			return {
				navH: 0,
				n: 0,
				title:'红包',
                tabbarId:2,
                packetList:[],
                redpacket_count:0,
                store_redpacket_count:0
			}
		},
		onLoad: function (options) {
			this.navH	  = getApp().globalData.navHeight;
			this.n		  = getApp().globalData.n;
            this.loadPacket();
		},
		methods:{
            loadPacket: function(){
                var self = this;
                var param = {
                    u_id     : uni.getStorageSync('openid'),
                    p_type   : self.tabbarId,
                    p_status : 1,
                    page     : 0,
                    limit    : 30
                };
                $api_base.post($api_base.getRedpacketList,param).then(function(res) {
                    let data = res.data;
                    if (data.ok == 1) {
                        self.redpacket_count       = data.data.redpacket_count;
                        self.store_redpacket_count = data.data.store_redpacket_count;
                        self.packetList            = data.data.redpocket_list.length > 0 ? data.data.redpocket_list : [];
                    }else{
                        self.packetList = [];
                    }
                })
            },
			tabbarEvent: function (e) {
			    var tabbarId = e;
			    this.tabbarId = tabbarId;
                this.loadPacket();
                
			},
            goUseless: function(){
                uni.navigateTo({
                	url: '/pages/red-packet/useless-packet/index'
                });
            },
            goStore: function(e){
                var storeId = e;
                uni.navigateTo({
                	url: '/pages/goods/goods?storeId=' + storeId
                });
            },
            goRedInfo: function(){
                if(this.tabbarId == 2){
                    uni.navigateTo({
                    	url: '/pages/red-packet/red-info/plat'
                    });
                }else{
                    uni.navigateTo({
                    	url: '/pages/red-packet/red-info/store'
                    });
                }
                
            }
			
		}
	}
</script>
<style>
  page {
  background-color: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
	@import 'index.scss';
</style>
